<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 轮播图管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <template>
                <el-button style="float: right" type="primary" icon="el-icon-circle-plus" @click="handleAdd()">新增</el-button>
                <el-table
                    :data="
                        form.pageIndex * form.pageSize < tableData.length
                            ? tableData.slice((form.pageIndex - 1) * form.pageSize, form.pageIndex * form.pageSize)
                            : tableData.slice((form.pageIndex - 1) * form.pageSize, tableData.length)
                    "
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column align="center" prop="infor" label="轮播图描述"> </el-table-column>
                    <el-table-column align="center" prop="picture" label="轮播图图片">
                        <el-image slot-scope="imag_add" :src="imag_add.row.picture" fit="contain"></el-image>
                    </el-table-column>
                    <el-table-column align="center" width="" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页开始 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="form.pageIndex"
                        :page-size="form.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
                <!-- 分页结束 -->
                <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#00D1B2" text="玩命加载中" />
            </template>
        </div>
        <!-- 修改弹出框 -->
        <el-dialog title="修改" :close-on-click-modal="false" :visible.sync="editVisible" width="30%">
            <el-form ref="form" enctype="multipart/form-data" :model="form" label-width="100px">
                <el-upload
                    class="upload-demo"
                    action="#"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-change="filechange"
                    list-type="picture"
                    :auto-upload="false"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">请选择轮播图图片进行修改</div>
                </el-upload>
                <!-- <form name="imgForm" id="imgForm" enctype="multipart/form-data" action="addAdvertisement" method="post">
                            <input class="input-loc-img" name="imgLocal" id="imgLocal" type="file" accept="image/*" />         <el-button
                        @click="update_Advertisement()"
                        >上传</el-button
                    >
                </form> -->
                <el-form-item style="top: 50px; position: relative" label="轮播图描述：">
                    <el-input v-model="form.infor"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
                <el-button @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 新增弹出框 -->
        <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="addVisible" width="60%">
            <el-form ref="form" enctype="multipart/form-data" :model="form" label-width="100px">
                <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="#"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-change="filechange"
                    list-type="picture"
                    :auto-upload="false"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">请选择轮播图图片进行上传</div>
                </el-upload>
                <!-- <form name="imgForm" id="imgForm" enctype="multipart/form-data" action="addAdvertisement" method="post">
                            <input class="input-loc-img" name="imgLocal" id="imgLocal" type="file" accept="image/*" />         <el-button
                        @click="update_Advertisement()"
                        >上传</el-button
                    >
                </form> -->
                <el-form-item style="top: 50px; position: relative" label="轮播图描述：">
                    <el-input v-model="form.infor"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAdd()">添加</el-button>
                <el-button @click="addVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import VueElementLoading from 'vue-element-loading';
import { allSlideShow, updateSlideShow, addSlideShow, deleteSlideShow } from '../../api/slideshow';

export default {
    components: {
        VueElementLoading
    },
    // inject: ['reload'],
    data: function() {
        return {
            // fileList: [
            //     {
            //         name: 'food.jpeg',
            //         url:
            //             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //     },
            //     {
            //         name: 'food2.jpeg',
            //         url:
            //             'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //     }
            // ],
            editVisible: false,
            addVisible: false,
            form: {
                slideshow_id: 0,
                infor: '',
                pageIndex: 1,
                pageSize: 3
            },
            tableData: [],
            formLabelWidth: '120px',
            isActive: false,
            pageTotal: 0,
            file: ''
        };
    },
    created() {
        this.initComm();
    },
    methods: {
        filechange(file) {
            this.file = file.raw;
            // console.log(this.file);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.form, 'pageIndex', val);
        },
        //初始化显示
        initComm() {
            this.isActive = true;
            allSlideShow()
                .then(res => {
                    // console.log(res);
                    // console.log('slideshowlist :>> ', res.data.slideshowlist);
                    this.tableData = res.data.slideshowlist;
                    this.isActive = false;
                    this.pageTotal = res.data.slideshowlist.length || 0;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveEdit() {
            this.editVisible = false;
            var formData = new FormData();
            formData.append('mf', this.file);
            formData.append('infor', this.form.infor);
            formData.append('slideshow_id', this.form.slideshow_id);
            updateSlideShow(formData)
                .then(res => {
                    this.initComm();
                    this.$message.success('修改成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveAdd() {
            this.addVisible = false;
            var formData = new FormData();
            formData.append('mf', this.file);
            formData.append('infor', this.form.infor);
            addSlideShow(formData)
                .then(() => {
                    this.initComm();
                    this.$message.success('添加成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 添加操作
        handleAdd() {
            this.form.infor = null;
            if(this.file !== '')
            this.$refs.upload.clearFiles()
            this.addVisible = true;

        },
        handleEdit(row) {
            this.form.slideshow_id = row.slideshow_id;
            this.form.infor = row.infor;
            this.file = row.picture
            this.editVisible = true;
        },
        handleDelete(row) {
            // console.log('row :>> ', row);
            this.$confirm('是否要进行删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var slideshow = JSON.stringify({
                        // 参数
                        slideshow_id: row.slideshow_id
                    });
                    deleteSlideShow(slideshow)
                        .then(res => {
                            this.initComm();
                            this.$message.success('删除成功');
                        })
                        .catch(err => {
                            console.log(err);
                        });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //分页
        handleSelectionChange() {}
    }
};
</script>

<style>
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.container {
    height: 100%;
}
</style>
